<template>
  <view class="main">
    <view class="top-block common">
      <view class="user dispaly-col-center">
        <view class="avatar">
          <image :src="userInfo?.avatar" mode="aspectFill" />
        </view>
        <view class="name" @click="setClipboardData(userInfo?.nickName)">{{
          userInfo?.nickName
        }}</view>
        <view class="com" @click="setClipboardData(userInfo?.company)">{{
          userInfo?.company
        }}</view>
        <view class="num-box dispaly-just-between">
          <view class="num-item dispaly-center">
            <view class="num" @click="setClipboardData(userInfo?.friendNum)">{{
              userInfo?.friendNum
            }}</view>
            <view class="text">人脉</view>
          </view>
          <!-- <view class="num-item dispaly-center">
                        <view class="num">360</view>
                        <view class="text">热度</view>
                    </view>
                    <view class="num-item dispaly-center">
                        <view class="num">360</view>
                        <view class="text">信用</view>
                    </view> -->
        </view>
      </view>
      <view class="code" @click="codeShow = true">
        <image src="/static/icon/code.svg" mode="aspectFill" />
      </view>
    </view>
    <view class="bottom-block">
      <view class="bottom-item dispaly-center">
        <view class="bottom-left">手机号</view>
        <view class="dispaly-center one">
          <!-- @click="copyPhone(phoneNumber)" -->
          <view class="right" v-if="isHidePhoneNumber">{{
            maskPhoneNumber(phoneNumber)
          }}</view>
          <view class="right" v-else>{{ phoneNumber }}</view>
          <!-- <view v-if="showT == 1">
            <view
              class="all"
              v-if="isHidePhoneNumber"
              @click="isHidePhoneNumber = false"
              >显示全部
            </view>
            <view class="all" v-else @click="isHidePhoneNumber = true"
              >隐藏</view
            >
          </view> -->
        </view>
      </view>
      <view class="bottom-item dispaly-center">
        <view class="bottom-left">常住城市</view>
        <view class="bottom-right" @click="setClipboardData(userInfo?.city)">{{
          userInfo?.city
        }}</view>
      </view>
      <view class="bottom-item dispaly-center">
        <view class="bottom-left">微信号</view>
        <view class="bottom-right" @click="setClipboardData(userInfo?.wx)">{{
          userInfo?.wx
        }}</view>
      </view>
      <view class="bottom-item dispaly-center">
        <view class="bottom-left">QQ</view>
        <view class="bottom-right" @click="setClipboardData(userInfo?.qq)">{{
          userInfo?.qq
        }}</view>
      </view>
      <view class="bottom-item dispaly-center">
        <view class="bottom-left">邮箱</view>
        <view class="bottom-right" @click="setClipboardData(userInfo?.email)">{{
          userInfo?.email
        }}</view>
      </view>
      <view class="bottom-item dispaly-center">
        <view class="bottom-left">家乡</view>
        <view class="bottom-right" @click="setClipboardData(userInfo?.home)">{{
          userInfo?.home
        }}</view>
      </view>
    </view>
    <view class="bottom-block">
      <view class="bottom-item">
        <view class="bottom-left">业务和特长</view>
        <view
          class="bottom-right"
          @click="setClipboardData(userInfo?.speciality)"
          >{{ userInfo?.speciality || "暂无" }}</view
        >
      </view>
    </view>
  </view>
  <view
    v-if="getUserSelfUserId() == userInfo?.userId"
    class="update dispaly-align-center"
    @click="$goUrl(`/pages/circle/pages/updateUser`)"
    >修改名片</view
  >

  <van-popup v-model:show="codeShow" round>
    <view class="pop-main">
      <view class="close" @click="codeShow = false">
        <van-icon name="cross" color="#999999" size="28" />
      </view>
      <view class="code-img dispaly-align-center">
        <image :src="userInfo?.qrCode" mode="aspectFill" />
      </view>
      <view class="tip dispaly-align-center">长按保存使用手机扫描二维码</view>
    </view>
  </van-popup>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getUserInfo, showTel, circleInfo } from "@/api/apiList";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { deleteObjectEmptyKey } from "@/utils/util";
// 0 f付钱
const userId = ref("");
onLoad((option) => {
  userId.value = option.id;
  showForm.circleId = option.circleId ? option.circleId : "";
  showForm.trendsId = option.trendsId ? option.trendsId : "";
  console.log(option, "option");
});

onShow(async () => {
  getUser();
  await getShowTel();
  isShowPhone();
});

const getUserSelfUserId = () => uni.getStorageSync("userInfo").userId;

const showForm = reactive({
  circleId: "",
  trendsId: "",
});

const showT = ref("");
const getShowTel = async () => {
  const newData = deleteObjectEmptyKey(showForm);
  const res = await circleInfo({ id: showForm.circleId });
  if (res.code == 200) {
    // showT.value = res.data.isShow;
    isHidePhoneNumber.value = res.data.isShow ? true : false;
    console.log(res, "resShowTel");
  }
};

const isShowPhone = async () => {
  const res = await showTel({
    circleId: showForm.circleId,
    memberId: userId.value,
  }); // showNum > 1 不用付钱

  if (res.code == 200) {
    let num = res.data;
    if (num > 0) {
      isHidePhoneNumber.value = false;
    } else {
      isHidePhoneNumber.value = true;
    }
  }
};

const userInfo = ref({});
const getUser = async () => {
  const res = await getUserInfo({ userId: userId.value ? userId.value : "" });
  if (res.code == 200) {
    userInfo.value = res.data;
    phoneNumber.value = userInfo.value?.phonenumber;
  }
};

const phoneNumber = ref("");
const isHidePhoneNumber = ref(true);
// 手机号脱敏
const maskPhoneNumber = (phoneNumber) => {
  if (!phoneNumber) return "";
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1********");
};

const codeShow = ref(false);

const setClipboardData = (parms) => {
  uni.setClipboardData({
    data: parms == null || parms == "" || parms == undefined ? "暂无" : parms,
    success: (res) => {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 2000,
      });
    },
  });
};
// 点击复制手机号
const copyPhone = (phone) => {
  // 先判断
  if (1 != 0) {
    uni.setClipboardData({
      data: phone,
      success: (res) => {
        uni.showToast({
          title: "复制成功",
          icon: "success",
          duration: 2000,
        });
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.common {
  padding: 30rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.pop-main {
  padding: 20rpx 20rpx 64rpx 20rpx;
  width: 616rpx;
  box-sizing: border-box;

  .close {
    display: flex;
    justify-content: flex-end;
  }

  .code-img {
    margin-top: 40rpx;

    image {
      width: 388rpx;
      height: 388rpx;
    }
  }

  .tip {
    margin-top: 40rpx;
    font-family: PingFang SC Medium;
    font-size: 24rpx;
    font-weight: normal;
    color: #555555;
  }
}

.update {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0753fd;
  font-family: PingFang SC Medium;
  font-size: 32rpx;
  color: #ffffff;
  height: 120rpx;
}

.main {
  padding: 30rpx;

  .top-block {
    margin-top: 66rpx;
    position: relative;

    .code {
      position: absolute;
      top: 56rpx;
      right: 82rpx;

      image {
        width: 44rpx;
        height: 44rpx;
      }
    }

    .user {
      margin-top: -80rpx;

      .avatar {
        image {
          width: 168rpx;
          height: 168rpx;
          border-radius: 50%;
        }
      }

      .name {
        font-family: PingFang SC Bold;
        font-size: 30rpx;
        font-weight: normal;
        color: #111111;
        margin: 32rpx 0 22rpx 0;
      }

      .com {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: normal;
        color: #999999;
        margin-bottom: 48rpx;
      }

      .num-box {
        .num-item:nth-child(2) {
          margin: 0 100rpx;
        }

        .num-item {
          .num {
            font-family: PingFang SC Heavy;
            font-size: 26rpx;
            font-weight: normal;
            color: #0753fd;
            margin-left: 5rpx;
          }

          .text {
            font-family: PingFang SC Medium;
            font-size: 22rpx;
            font-weight: normal;
            color: #999999;
          }
        }
      }
    }
  }

  .bottom-block {
    padding: 26rpx 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;

    .bottom-item:last-child {
      margin-bottom: 0;
    }

    .bottom-item {
      margin-bottom: 46rpx;

      .one {
        flex: 4;

        .right,
        .all {
          font-family: PingFang SC Medium;
          font-size: 24rpx;
          font-weight: normal;
          color: #111111;
        }

        .all {
          color: #0753fd;
        }

        .right {
          margin-right: 60rpx;
        }
      }

      .bottom-left {
        font-family: PingFang SC Bold;
        font-size: 24rpx;
        font-weight: normal;
        color: #0753fd;
        flex: 2;
      }

      .bottom-right {
        flex: 4;
        font-family: PingFang SC Medium;
        font-size: 24rpx;
        font-weight: normal;
        color: #111111;
      }
    }
  }
}
</style>
